<template>
	<view class="fixeBox">
		<!-- 判断liner是否为true如果为true加上背景色 -->
		<view :class="messageInfo.liner==true?'linertop':'top'">
			<view :class="messageInfo.liner==true?'top-image':'top-image2'" v-if="messageInfo.typeFlag" @click="gotoBack()"
				:style="{'margin-top': marginTopHeight + 'rpx'}">
			</view>
			<view class="top-message" :style="{'margin-top': marginTopHeight + 'rpx'}">
				<view :class="messageInfo.liner==true?'bigtext2':'bigtext'">
					{{messageInfo.message}}
				</view>
			</view>
			<slot class="right-message" name="rightmsg"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "header-top",
		props: ['messageInfo'],
		data() {
			return {
				marginTopHeight: 0, //苹果X以上手机底部适配高度
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.marginTopHeight = 60;
							that.marginTopHeightTitle = 80;
						}
					});
					let brand = res.brand;
					// #ifdef MP-WEIXIN
					//适配华为
					if (brand.search('HUAWEI') != -1) {
						that.marginTopHeight = 40;
						that.marginTopHeightTitle = 60;
					}
					if (brand.search('HONOR') != -1) {
						that.marginTopHeight = 60;
						that.marginTopHeightTitle = 80;
					}
					// 适配小米
					if (brand.search('Redmi') != -1) {
						that.marginTopHeight = 50;
						that.marginTopHeightTitle = 60;
					}
					if (brand.search('MI') != -1) {
						that.marginTopHeight = 70;
						that.marginTopHeightTitle = 80;
					}
					// #endif
				}
			});
		},
		methods: {
			gotoBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.fixeBox {
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		height: 170rpx;
		/*#endif*/
		/*#ifdef H5*/
		height: 80rpx;
		/*#endif*/
		width: 100%;
	}
	.top {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		height: 170rpx;
		/*#endif*/
		/*#ifdef H5*/
		height: 80rpx;
		/*#endif*/
		width: 100%;
		background-color: #fff;
		background-size: cover;
		display: flex;
		align-items: center;
	}
	.linertop {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
		height: 170rpx;
		/*#ifdef H5*/
		height: 80rpx;
		/*#endif*/
		width: 100%;
		background-image: url('@/static/image/system/toububjt.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
	}
	.top-message {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-top: 100rpx !important;
		
	}
	.bigtext{
		width: 300rpx;
		overflow: hidden;
		/* 限制一行显示 */
		white-space: nowrap;
		/* 显示不下省略号显示 */
		text-overflow: ellipsis
	}
	.bigtext2{
		color: #fff;
		width: 300rpx;
		overflow: hidden;
		/* 限制一行显示 */
		white-space: nowrap;
		/* 显示不下省略号显示 */
		text-overflow: ellipsis
	}
	.top-image2 {
		position: absolute;
		left: 40rpx;
		height: 43rpx;
		width: 100rpx;
		background: url('@/static/image/system/returnhei.png') no-repeat;
		background-size: 20rpx 38rpx;
		/* #ifdef APP-PLUS */
		margin-top: 120rpx !important;
		/* #endif */
	}
	.top-image {
		position: absolute;
		left: 40rpx;
		height: 43rpx;
		width: 100rpx;
		background: url('@/static/image/system/returnbai.png') no-repeat;
		background-size: 20rpx 38rpx;
		/* #ifdef APP-PLUS */
		margin-top: 120rpx !important;
		/* #endif */
	}
	.right-message{
		position: absolute;
		right: 44rpx;
		height: 43rpx;
		line-height: 43rpx;
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		 /* #ifdef APP-PLUS */
		margin-top: 120rpx !important;
		/* #endif */
	}
</style>
